<template>
  <template v-if="!readonly">
    <div class="text-h6 text-weight-medium text-primary ellipsis">
      {{ ['area'].includes(type) ? $t('MapCore.AreaAttrs') : $t('MapCore.TextAttrs') }}
    </div>
    <div class="text-body2 q-pb-md">
      <div class="warning-tips text-weight-medium">
        <q-icon class="map-warning-tips-icon" name="mdi-information-outline" size="1.25rem"></q-icon>
        {{ $t('MapCore.SaveTip1', [$t('MapCore.SaveMap')]) }}
      </div>
    </div>
  </template>
  <qx-form ref="shapeRef" v-model="formInfo" :option="shapeOption" class="q-pl-md q-pr-md" nonTop>
    <template v-slot:relativeCoord="{ attrs = {} }">
      <div v-if="readonly" class="row text-grey-7 items-center">
        {{ formInfo?.x }}, {{ formInfo?.y }}
      </div>
      <div v-else class="row justify-between no-wrap">
        <q-number v-model="formInfo.x" :readonly="readonly" class="col" decimals="3" v-bind="attrs"
                  v-bind:placeholder="'x'" v-bind:rules="getRules('X')" @blur="numBlur"></q-number>
        <div class="row items-end q-px-xs">,</div>
        <q-number v-model="formInfo.y" :readonly="readonly" class="col" decimals="3" v-bind="attrs"
                  v-bind:placeholder="'y'" v-bind:rules="getRules('Y')" @blur="numBlur"></q-number>
      </div>
    </template>
    <template v-slot:textA>
      <q-select v-model="formInfo.textFontSize" :options="[10, 12, 14, 16, 18, 20, 22, 24]" :readonly="allRead" dense
                outlined></q-select>
    </template>
  </qx-form>
</template>

<script setup>
import { i18n } from 'boot/i18n'
import { isEmpty } from 'src/utils/utils'
import { computed, inject, ref, watch } from 'vue'

const props = defineProps({ type: String, rowInfo: Object, allRead: Boolean, readonly: Boolean })
const updateShapeAttrs = inject('updateShapeAttrs', void 0)
const updateShapeCoord = inject('updateShapeCoord', void 0)

const formInfo = ref({})
const shapeRef = ref(null)
const shapeOption = computed(() => {
  const { type = '3' } = props
  let column = []
  if (['createArea', 'area'].includes(type)) {
    column = [{
      label: `${i18n.t('MapCore.AreaCoord')}(m)`, field: 'relativeCoord', formslot: true, required: true
    }, {
      label: `${i18n.t('MapCore.AreaWidth')}(m)`, field: 'width', type: 'number', decimals: 3,
      required: true, min: 0, readonly: props.readonly
    }, {
      label: `${i18n.t('MapCore.AreaHeight')}(m)`, field: 'height', type: 'number', decimals: 3,
      required: true, min: 0, readonly: props.readonly
    }, {
      label: `${i18n.t('MapCore.AreaBorder')}`, field: 'border', type: 'radio', options: [{
        label: `${i18n.t('MapCore.AreaBorderTip1')}`, value: 'dash'
      }, {
        label: `${i18n.t('MapCore.AreaBorderTip2')}`, value: 'stroke'
      }, {
        label: `${i18n.t('MapCore.AreaBorderTip3')}`, value: 'none'
      }], value: 'dash'
    }, {
      label: `${i18n.t('MapCore.AreaBorderColor')}`, field: 'stroke', type: 'color', required: true,
      display: formInfo.value.border !== 'none', value: 'rgba(22, 119, 255, 1)'
    }, {
      label: `${i18n.t('MapCore.AreaBgColor')}`, field: 'fill', type: 'color', required: true,
      value: 'rgba(22, 119, 255, 0.15)'
    }, {
      label: `${i18n.t('MapCore.AreaTitle')}`, field: 'text', required: true, maxlength: 50
    }, {
      label: `${i18n.t('MapCore.AreaTitleColor')}`, field: 'textColor', type: 'color', required: true,
      value: 'rgba(0, 0, 0, 1)'
    }]
  } else if (['createText', 'text'].includes(type)) {
    column = [{
      label: `${i18n.t('MapCore.TextCoord')}(m)`, field: 'relativeCoord', formslot: true, required: true
    }, {
      label: `${i18n.t('MapCore.Text')}`, field: 'text', required: true, maxlength: 50
    }, {
      label: `${i18n.t('MapCore.TextColor')}`, field: 'textColor', type: 'color', required: true,
      value: 'rgba(0, 0, 0, 1)'
    }]
  }
  return { span: 24, labelWidth: 90, labelPosition: 'left', column, readonly: props.allRead }
})

const getRules = coord => {
  return [val => !isEmpty(val) || `${i18n.t('PleaseInput')}${i18n.t('MapCore.SpecifyCoord', { coord })}`]
}
const numBlur = () => updateShapeCoord && updateShapeCoord(formInfo.value)
const getFormInfo = () => {
  formInfo.value = props.rowInfo || {}
  formInfo.value.textFontSize = formInfo.value.textFontSize || 14
}
watch(() => props.rowInfo, () => getFormInfo(), { immediate: true })

const submitAjax = mDone => {
  shapeRef.value.validate((form, done1) => {
    const done = () => {
      done1 && done1()
      mDone && mDone()
    }
    updateShapeAttrs && updateShapeAttrs(form, done)
  }, () => mDone && mDone(false))
}
defineExpose({ submitAjax })
</script>